<style>
.body {
  height: 720px;
  background-color: #e3f2fd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  width: 600px;
  height: 350px;
  background-color: white;
  border: 1px solid #e3f2fd;
}
.btn:hover {
  background: #e3f2fd;
  border: 1px solid #e3f2fd;
  color: white;
}
.btn {
  margin-left: 160px;
}
.input {
  width: 330px;
}
</style>
<template>
  <div class="body">
    <div>
      <Icon type="ios-hand-outline" size="80"></Icon>
    </div>
    <div>
      <h1>教师评教管理系统</h1>
    </div>
    <div class="box">
      <h2>欢迎登陆</h2>

      <Form ref="user" :model="user" :rules="ruleValidate" :label-width="80">
        <FormItem label="账号" prop="account">
          <Input
            class="input"
            clearable
            v-model="user.account"
            type="text"
            placeholder="账号"
            autocomplete="off"
          />
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input
            class="input"
            clearable
            v-model="user.password"
            password
            type="password"
            autocomplete="off"
            placeholder="密码"
          />
        </FormItem>
        <Button class="btn" @click="login('user')" :loading="loading"
          >立即登录</Button
        >
      </Form>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      id: this.$route.params.id,
      user: {},
      loading: false,

      //添加用户时的表单验证
      ruleValidate: {
        account: [
          { required: true, message: "登录账号不能为空", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "登录密码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    login(name) {
      this.loading = true;
      this.$refs[name].validate((valid) => {
        //验证输入的用户信息是否正确
        if (valid) {
          this.$axios
            .post("/user/login", this.user)
            .then((result) => {
              if (result.data.code == 0) {
                //保存用户登录信息
                //将用户名放入sessionStorage
                sessionStorage.setItem(
                  "userInfo",
                   JSON.stringify(result.data.data)
                );
                //将用户名放入vuex     
                this.$store.dispatch("setUser", result.data.data);
                this.$router.push("/main/myInfo");
              } else {
                this.loading = false;
                this.$Message.error({
                  duration: 2.5,
                  background: true,
                  content: result.data.msg,
                });
                this.user.password = ''
              }
            })
            .catch((err) => {
              this.$Message.error({
                  duration: 2.5,
                  background: true,
                  content: "网络错误",
                });
                this.loading = false;
            });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style>
</style>